<template>
<div>
    <hr />
  <h2>   
    {{mainTitle}}   <span>{{ datalist.length }}</span>
  </h2>
  <ul v-if="datalist.length !== 0">
    <li v-for="item in datalist" :key="item.id" class="titem">

       <input type="checkbox" v-model="item.completed" />
      <input
        @focus="editorTodo(item)"
        @keyup.esc="cancelEditor(item)"
        type="text"
        v-model="item.title"
      />
     
      <a href="javascript:void(0)" @click="delTodo(item)" class="btnDel">删除</a>
    </li>
  </ul>
</div>
 
</template>
<script setup>

//import { defineProps,defineEmits } from 'vue';
import toDoFunc from '../operation'
const props=defineProps({
    mainTitle:{
        type:String,
        default:()=>'待办事项'
    },
    datalist:{
        type:Array,
        default:()=>[]
    },
    todoLists:{
        type:Array,
        default:()=>[]
    }

})


const  { editorTodo,cancelEditor,delTodo} = toDoFunc(props.todoLists,'')
 
</script>
